<template>
  <el-row>
    <el-col :span="8">
      <el-select v-model="form.province" :size="size" :clearable="clearable" style="margin-right: 2px" placeholder="-- 省份 --" filterable @change="handleChangeProvince">
        <el-option
          v-for="item in provinceOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="form.city" :size="size" :clearable="clearable" style="margin-right: 2px; margin-left: 2px" placeholder="-- 城市 --" no-data-text="请先选择省份" filterable @change="handleChangeCity">
        <el-option
          v-for="item in cityOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="form.district" :size="size" :clearable="clearable" style="margin-left: 2px" placeholder="-- 地区 --" no-data-text="请先选择城市" filterable @change="handleChangeDistrict">
        <el-option
          v-for="item in districtOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
import { pcaa } from 'area-data'
export default {
  name: 'DistPicker',
  props: {
    size: {
      type: String,
      default: ''
    },
    province: {
      type: Object,
      default: function() {
        return {
          label: '',
          value: ''
        }
      }
    },
    city: {
      type: Object,
      default: function() {
        return {
          label: '',
          value: ''
        }
      }
    },
    district: {
      type: Object,
      default: function() {
        return {
          label: '',
          value: ''
        }
      }
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        province: this.province.value,
        city: this.city.value,
        district: this.district.value
      },
      location: {
        province: this.province,
        city: this.city,
        district: this.city
      },
      provinceOptions: this.transObj2Option(pcaa['86'])
    }
  },
  computed: {
    cityOptions: function() {
      if (this.location.province && this.location.province.value) {
        return this.transObj2Option(pcaa[this.location.province.value])
      } else {
        return []
      }
    },
    districtOptions: function() {
      if (this.location.city && this.location.city.value) {
        return this.transObj2Option(pcaa[this.location.city.value])
      } else {
        return []
      }
    }
  },
  watch: {
    location: {
      handler: function(val) {
        this.$emit('change', val)
      },
      deep: true
    }
  },
  methods: {
    handleChangeProvince(value) {
      this.form.city = ''
      this.form.district = ''
      this.location.city = {
        label: '',
        value: ''
      }
      this.location.district = {
        label: '',
        value: ''
      }
      this.location.province = this.provinceOptions.find((item) => {
        return item.value === value
      })
    },
    handleChangeCity(value) {
      this.form.district = ''
      this.location.district = {
        label: '',
        value: ''
      }
      this.location.city = this.cityOptions.find((item) => {
        return item.value === value
      })
    },
    handleChangeDistrict(value) {
      this.location.district = this.districtOptions.find((item) => {
        return item.value === value
      })
    },
    transObj2Option(obj) {
      const arr = []
      for (const i in obj) {
        const tmp = {
          label: obj[i],
          value: i
        }
        arr.push(tmp)
      }
      return arr
    }
  }
}
</script>
